<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item label="报名状态" prop="acceptStatus">
                            <el-select v-model="condition.search.acceptStatus"
                                       placeholder="报名状态">
                                <el-option label="报名审核中"
                                           value="APPLY_AUDITING"></el-option>
                                <el-option label="审核被拒"
                                           value="APPLY_REFUSED"></el-option>
                                <el-option label="审核通过(待提交作业)"
                                           value="APPLY_PASS"></el-option>
                                <el-option label="作业审核中"
                                           value="JOB_AUDITING"></el-option>
                                <el-option label="作业被拒"
                                           value="JOB_REFUSED"></el-option>
                                <el-option label="作业通过"
                                           value="JOB_PASS"></el-option>
                                <el-option label="已完结"
                                           value="FINISHED"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="领队" prop="groupLeader">
                            <el-input v-model="condition.search.groupLeader"
                                      placeholder="领队"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" v-on:click="urlFlag = !urlFlag">
                                {{ urlFlag ? '隐藏链接' : '显示链接' }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="kolTaskTable"
            ref="kolTaskTable"
            :data="tableData"
            show-summary
            :summary-method="getSummaries"
            size="small"
            :span-method="objectSpanMethod"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="50">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="groupLeader"
                label="领队">
            </el-table-column>
            <el-table-column
                prop="acceptStatus"
                :formatter="formatAcceptStatus"
                label="报名状态">
            </el-table-column>
            <el-table-column
                prop="expectDate"
                label="到店日期">
            </el-table-column>
            <el-table-column
                prop="expectTime"
                label="到店时间">
            </el-table-column>
            <el-table-column label="达人信息" align="center" prop="allItems" v-if="platform === 'DP'">
                <el-table-column
                    prop="nickName"
                    label="昵称">
                    <template v-slot="scope">
                        <a :href="scope.row.kol.url" target="_blank">
                            {{ scope.row.kol.nickName }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="urlFlag"
                    prop="kol.url"
                    label="链接">
                </el-table-column>
                <el-table-column
                    prop="kol.level"
                    label="等级">
                    <template v-slot="scope">
                        <span v-if="scope.row.kol.level">
                            LV{{ scope.row.kol.level }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="kol.fansCount"
                    label="粉丝数量">
                </el-table-column>
                <el-table-column
                    prop="kol.followCount"
                    label="关注数量">
                </el-table-column>
                <el-table-column
                    prop="kol.readCount"
                    label="阅读数量">
                </el-table-column>
                <el-table-column
                    prop="kol.flowerCount"
                    label="获赞数量">
                </el-table-column>
                <el-table-column
                    prop="kol.gender"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="kol.city"
                    label="城市">
                </el-table-column>
                <el-table-column
                    prop="kol.redFlag"
                    :formatter="formatBoolean"
                    label="红V作者">
                </el-table-column>
                <el-table-column
                    width="100"
                    prop="kol.fansActivity"
                    label="粉丝活跃度">
                </el-table-column>
                <el-table-column
                    width="100"
                    prop="kol.flowerActivity"
                    label="阅读获赞比">
                </el-table-column>
            </el-table-column>
            <el-table-column label="达人信息" align="center" prop="allItems" v-if="platform === 'DY'">
                <el-table-column
                    prop="nickName"
                    label="昵称">
                    <template v-slot="scope">
                        <a :href="scope.row.kol.url" target="_blank">
                            {{ scope.row.kol.nickName }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="urlFlag"
                    prop="kol.url"
                    label="链接">
                </el-table-column>
                <el-table-column
                    prop="kol.level"
                    label="带货等级">
                    <template v-slot="scope">
                        <span v-if="scope.row.kol.level">
                            LV{{ scope.row.kol.level }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="kol.fansCount"
                    label="粉丝数量">
                </el-table-column>
                <el-table-column
                    prop="kol.followCount"
                    label="关注数量">
                </el-table-column>
                <el-table-column
                    prop="kol.flowerCount"
                    label="获赞数量">
                </el-table-column>
                <el-table-column
                    prop="kol.gender"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="kol.city"
                    label="城市">
                </el-table-column>
                <el-table-column
                    prop="kol.faceFlag"
                    :formatter="formatBoolean"
                    label="颜值探店">
                </el-table-column>
                <el-table-column
                    v-if="mode === 'ADMIN'"
                    prop="kol.wechat"
                    label="联系微信">
                </el-table-column>
                <el-table-column
                    prop="kol.marketPrice"
                    label="报价">
                </el-table-column>
                <el-table-column
                    prop="kol.comment"
                    label="评论">
                </el-table-column>
            </el-table-column>
            <el-table-column label="达人信息" align="center" prop="allItems" v-if="platform === 'XHS'">
                <el-table-column
                    prop="nickName"
                    label="昵称">
                    <template v-slot="scope">
                        <a :href="scope.row.kol.url" target="_blank">
                            {{ scope.row.kol.nickName }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="urlFlag"
                    prop="kol.url"
                    label="链接">
                </el-table-column>
                <el-table-column
                    prop="kol.fansCount"
                    label="粉丝数量">
                </el-table-column>
                <el-table-column
                    prop="kol.followCount"
                    label="关注数量">
                </el-table-column>
                <el-table-column
                    prop="kol.flowerCount"
                    label="获赞数量">
                </el-table-column>
                <el-table-column
                    prop="kol.gender"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="kol.city"
                    label="城市">
                </el-table-column>
                <el-table-column
                    prop="kol.faceFlag"
                    :formatter="formatBoolean"
                    label="颜值探店">
                </el-table-column>
                <el-table-column
                    v-if="mode === 'ADMIN'"
                    prop="kol.wechat"
                    label="联系微信">
                </el-table-column>
                <el-table-column
                    prop="kol.marketPrice"
                    label="报价">
                </el-table-column>
                <el-table-column
                    prop="kol.comment"
                    label="评论">
                </el-table-column>
            </el-table-column>
            <el-table-column label="作业链接" align="center" prop="jobs" v-if="mode === 'ADMIN'">
                <el-table-column
                    v-if="urlFlag"
                    prop="dpJobUrl"
                    key="dpJobUrl"
                    label="点评">
                    <template v-slot="scope">
                        <a :href="scope.row.dpJobUrl" target="_blank" v-if="scope.row.dpJobUrl">
                            {{ scope.row.dpJobUrl }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else
                    prop="dpJobUrlTitle"
                    key="dpJobUrlTitle"
                    label="点评">
                    <template v-slot="scope">
                        <a :href="scope.row.dpJobUrl" target="_blank" v-if="scope.row.dpJobUrl">
                            {{ scope.row.dpJobTitle }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="urlFlag"
                    prop="hsJobUrl"
                    key="hsJobUrl"
                    label="小红书">
                    <template v-slot="scope">
                        <a :href="scope.row.hsJobUrl" target="_blank" v-if="scope.row.hsJobUrl">
                            {{ scope.row.hsJobUrl }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else
                    prop="hsJobUrlTitle"
                    key="hsJobUrlTitle"
                    label="小红书">
                    <template v-slot="scope">
                        <a :href="scope.row.hsJobUrl" target="_blank" v-if="scope.row.hsJobUrl">
                            点击查看
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dyJobUrl"
                    label="抖音">
                </el-table-column>
                <el-table-column
                    prop="xcJobUrl"
                    label="携程">
                </el-table-column>
            </el-table-column>
            <el-table-column
                v-if="mode === 'ADMIN'"
                prop="suggestion"
                label="门店建议">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                v-if="mode === 'ADMIN'"
                label="操作"
                align="center"
                fixed="right"
                width="160">
                <template v-slot="scope">
                    <div>
                        <el-button @click="auditApply(scope.row)" type="text" size="small">审核</el-button>
                        <el-button @click="changeKol(scope.row)" type="text" size="small">换号</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="submitJob(scope.row)" type="text" size="small">交作业</el-button>
                        <el-button @click="setTime(scope.row)" type="text" size="small">设置到店时间</el-button>
                        <el-button @click="editKol(scope.row)" type="text" size="small">编辑达人信息</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                v-if="mode === 'MERCHANT'"
                label="操作"
                align="center"
                fixed="right"
                width="80">
                <template v-slot="scope">
                    <div>
                        <el-button @click="auditApply(scope.row)" type="text" size="small">审核</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="关联活动ID">
                    <el-input v-model="addOrUpdateForm.taskId"
                              placeholder="关联活动ID"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="关联达人ID">
                    <el-input v-model="addOrUpdateForm.kolId"
                              placeholder="关联达人ID"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="报名状态">
                    <el-select v-model="addOrUpdateForm.acceptStatus"
                               placeholder="报名状态">
                        <el-option label="作业审核成功"
                                   value="JOB_SUCCEEDED"></el-option>
                        <el-option label="报名审核中"
                                   value="APPLY_AUDITING"></el-option>
                        <el-option label="审核失败"
                                   value="APPLY_FAILED"></el-option>
                        <el-option label="已完结"
                                   value="FINISHED"></el-option>
                        <el-option label="作业审核中"
                                   value="JOB_AUDITING"></el-option>
                        <el-option label="审核通过"
                                   value="APPLY_SUCCEEDED"></el-option>
                        <el-option label="作业审核失败"
                                   value="JOB_FAILED"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预计到店日期">
                    <el-date-picker
                        v-model="addOrUpdateForm.expectDate"
                        type="date"
                        placeholder="预计到店日期"
                        value-format="yyyy-MM-dd"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预计到店时间">
                    <el-input v-model="addOrUpdateForm.expectTime"
                              placeholder="预计到店时间"></el-input>
                </el-form-item>
                <el-form-item label="点评作业链接">
                    <el-input v-model="addOrUpdateForm.dpJobUrl"
                              type="textarea"
                              placeholder="点评作业链接"></el-input>
                </el-form-item>
                <el-form-item label="小红书作业链接">
                    <el-input v-model="addOrUpdateForm.hsJobUrl"
                              type="textarea"
                              placeholder="小红书作业链接"></el-input>
                </el-form-item>
                <el-form-item label="抖音作业链接">
                    <el-input v-model="addOrUpdateForm.dyJobUrl"
                              type="textarea"
                              placeholder="抖音作业链接"></el-input>
                </el-form-item>
                <el-form-item label="携程作业链接">
                    <el-input v-model="addOrUpdateForm.xcJobUrl"
                              type="textarea"
                              placeholder="携程作业链接"></el-input>
                </el-form-item>
                <el-form-item label="门店建议">
                    <el-input v-model="addOrUpdateForm.suggestion"
                              type="textarea"
                              placeholder="门店建议"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="审核报名" width="30%" :visible.sync="auditApplyDialogVisible">
            <el-form :model="auditApplyForm" label-width="120px" size="small">
                <el-form-item label="审核状态">
                    <el-select v-model="auditApplyForm.auditStatus"
                               placeholder="审核状态">
                        <el-option label="审核通过"
                                   value="PASS"></el-option>
                        <el-option label="审核被拒"
                                   value="REFUSED"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否加入白名单" v-if="auditApplyForm.auditStatus === 'PASS'">
                    <el-switch v-model="auditApplyForm.whiteFlag"></el-switch>
                </el-form-item>
                <el-form-item label="是否加入黑名单" v-if="auditApplyForm.auditStatus === 'REFUSED'">
                    <el-switch v-model="auditApplyForm.blackFlag"></el-switch>
                </el-form-item>
                <el-form-item label="失败原因" v-if="auditApplyForm.auditStatus === 'REFUSED'">
                    <el-input v-model="auditApplyForm.reason"
                              type="textarea"
                              placeholder="失败原因"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="auditApplyDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="auditApplyConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="设置到店时间" width="30%" :visible.sync="setTimeDialogVisible">
            <el-form :model="setTimeForm" label-width="150px" size="small">
                <el-form-item label="预计到店日期">
                    <el-date-picker
                        v-model="setTimeForm.expectDate"
                        type="date"
                        placeholder="预计到店日期"
                        value-format="yyyy-MM-dd"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预计到店时间">
                    <el-input v-model="setTimeForm.expectTime"
                              placeholder="预计到店时间"></el-input>
                </el-form-item>
                <el-form-item label="是否同步组内其他人">
                    <el-switch v-model="setTimeForm.groupOthers"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setTimeDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setTimeConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="换号" width="30%" :visible.sync="changeKolDialogVisible">
            <el-form :model="changeKolForm" label-width="120px" size="small">
                <el-form-item label="新号地址">
                    <el-input v-model="changeKolForm.kolUrl"
                              type="textarea"
                              placeholder="新号地址"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changeKolDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="changeKolConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提交作业" width="30%" :visible.sync="submitJobDialogVisible">
            <el-form :model="submitJobForm" label-width="120px" size="small">
                <el-form-item label="点评作业链接">
                    <el-input v-model="submitJobForm.dpJobUrl"
                              type="textarea"
                              placeholder="点评作业链接"></el-input>
                </el-form-item>
                <el-form-item label="小红书作业链接">
                    <el-input v-model="submitJobForm.hsJobUrl"
                              type="textarea"
                              placeholder="小红书作业链接"></el-input>
                </el-form-item>
                <el-form-item label="抖音作业链接">
                    <el-input v-model="submitJobForm.dyJobUrl"
                              type="textarea"
                              placeholder="抖音作业链接"></el-input>
                </el-form-item>
                <el-form-item label="携程作业链接">
                    <el-input v-model="submitJobForm.xcJobUrl"
                              type="textarea"
                              placeholder="携程作业链接"></el-input>
                </el-form-item>
                <el-form-item label="门店建议">
                    <el-input v-model="submitJobForm.suggestion"
                              type="textarea"
                              placeholder="门店建议"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitJobDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="submitJobConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-drawer direction="rtl" title="编辑达人信息" width="30%" :visible.sync="editKolDialogVisible">
            <el-form :model="editKolForm" label-width="120px" size="small">
                <el-form-item label="平台">
                    <el-select v-model="editKolForm.platform" :disabled="disabled"
                               placeholder="平台">
                        <el-option label="点评"
                                   value="DP"></el-option>
                        <el-option label="抖音"
                                   value="DY"></el-option>
                        <el-option label="小红书"
                                   value="XHS"></el-option>
                        <el-option label="微博"
                                   value="WB"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主页链接" v-if="editKolForm.platform">
                    <el-input v-model="editKolForm.url" :disabled="disabled"
                              type="textarea"
                              placeholder="主页链接"></el-input>
                </el-form-item>
                <el-form-item label="评级">
                    <el-select v-model="editKolForm.rating"
                               placeholder="评级">
                        <el-option label="8W粉+(S级)"
                                   value="S"></el-option>
                        <el-option label="5-8W粉(A级)"
                                   value="A"></el-option>
                        <el-option label="3-5W粉(B级)"
                                   value="B"></el-option>
                        <el-option label="1-3W粉(C级)"
                                   value="C"></el-option>
                        <el-option label="5千-1W粉(D级)"
                                   value="D"></el-option>
                        <el-option label="1千-5千粉(E级)"
                                   value="E"></el-option>
                        <el-option label="0-1千粉(F级)"
                                   value="F"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称" v-if="editKolForm.platform && editKolForm.platform !== 'DP'">
                    <el-input v-model="editKolForm.nickName"
                              placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item label="带货等级" v-if="editKolForm.platform && editKolForm.platform === 'DY'">
                    <el-input v-model="editKolForm.level"
                              placeholder="带货等级"></el-input>
                </el-form-item>
                <el-form-item label="关注数量" v-if="editKolForm.platform && editKolForm.platform !== 'DP'">
                    <el-input v-model="editKolForm.followCount"
                              placeholder="关注数量"></el-input>
                </el-form-item>
                <el-form-item label="粉丝数量" v-if="editKolForm.platform && editKolForm.platform !== 'DP'">
                    <el-input v-model="editKolForm.fansCount"
                              placeholder="粉丝数量"></el-input>
                </el-form-item>
                <el-form-item label="阅读数量"
                              v-if="editKolForm.platform && editKolForm.platform !== 'DP' && editKolForm.platform !== 'DY'">
                    <el-input v-model="editKolForm.readCount"
                              placeholder="阅读数量"></el-input>
                </el-form-item>
                <el-form-item label="获赞数量" v-if="editKolForm.platform && editKolForm.platform !== 'DP'">
                    <el-input v-model="editKolForm.flowerCount"
                              placeholder="获赞数量"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-select v-model="editKolForm.age"
                               placeholder="年龄">
                        <el-option label="20岁以下"
                                   value="UNDER20"></el-option>
                        <el-option label="20到30岁"
                                   value="BETWEEN20AND30"></el-option>
                        <el-option label="30到40岁"
                                   value="BETWEEN30AND40"></el-option>
                        <el-option label="40到50岁"
                                   value="BETWEEN40AND50"></el-option>
                        <el-option label="50岁以上"
                                   value="UPPER50"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城市" v-if="editKolForm.platform && editKolForm.platform !== 'DP'">
                    <el-input v-model="editKolForm.city"
                              placeholder="城市"></el-input>
                </el-form-item>
                <el-form-item label="擅长领域">
                    <el-input v-model="editKolForm.specialize"
                              placeholder="擅长领域"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editKolForm.mobileNo"
                              placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item label="联系微信">
                    <el-input v-model="editKolForm.wechat"
                              placeholder="微信"></el-input>
                </el-form-item>
                <el-form-item label="是否颜值探店">
                    <el-switch v-model="editKolForm.faceFlag"></el-switch>
                </el-form-item>
                <el-form-item label="是否红V作者" v-if="editKolForm.platform && editKolForm.platform === 'DP'">
                    <el-switch v-model="editKolForm.redFlag"></el-switch>
                </el-form-item>
                <el-form-item label="是否黑名单">
                    <el-switch v-model="editKolForm.blackFlag"></el-switch>
                </el-form-item>
                <el-form-item label="达人报价">
                    <el-input v-model="editKolForm.marketPrice"
                              placeholder="达人报价"></el-input>
                </el-form-item>
                <el-form-item label="评论">
                    <el-input v-model="editKolForm.comment"
                              type="textarea"
                              placeholder="评论"></el-input>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="editKolDialogVisible = false" size="small">取 消
                </el-button>
                <el-button class="drawer-footer-button" @click="editKolConfirm" type="primary" size="small">确 定
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {
    addKolTask,
    deleteKolTask,
    getKolTaskByPage,
    taskApplyAudit,
    taskApplyChangeKol,
    taskApplySetTime,
    TaskApplySubmitJob,
    updateKol,
    updateKolTask
} from '@/api/api'

export default {
    name: "KolTask",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 50,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 默认不显示链接
            urlFlag: false,

            rowSpanArr: [],
            position: 0,

            auditApplyDialogVisible: false,
            auditApplyForm: {},

            changeKolDialogVisible: false,
            changeKolForm: {},

            setTimeDialogVisible: false,
            setTimeForm: {},

            submitJobDialogVisible: false,
            submitJobForm: {},

            editKolDialogVisible: false,
            editKolForm: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        taskId: String,
        taskName: String,
        platform: String,
        // ADMIN(内部管理)/MERCHANT(商家选号)
        mode: String,
    },
    methods: {
        editKol(row) {
            this.selectedRow = row;
            this.editKolDialogVisible = true;
            // 深拷贝
            this.editKolForm = Object.assign({}, row.kol);
            this.disabled = true;
        },
        editKolConfirm() {
            updateKol(this.editKolForm).then(data => {
                this.editKolDialogVisible = false;
                this.getData();
            });
        },
        // 获取嵌套数组/对象中的值
        getObjChild(obj, key, gap = '.') {
            let tmp = {};
            let arr = key.split(gap); //将key拆成数组

            if (obj[arr[0]]) {
                tmp = obj[arr[0]];
                for (let i = 1; i < arr.length; i++) { //逐层进入匹配查找
                    let is_found = false;
                    if (typeof tmp === 'object') {
                        for (let j in tmp) {
                            if (j === arr[i]) {
                                tmp = tmp[j];
                                is_found = true;
                                break;
                            }
                        }
                    }
                    if (!is_found) {
                        tmp = false;
                        break;
                    }
                }
            } else {
                tmp = false;
            }
            return tmp;
        },
        getSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计';
                    return;
                }
                let prop = column.property;
                if (prop && (prop === 'kol.fansCount' || prop === 'kol.followCount' || prop === 'kol.flowerCount' || prop === 'kol.readCount' || prop === 'kol.marketPrice')) {
                    const values = data.map(item => this.convertNumber(this.getObjChild(item, column.property)));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = (sums[index] / 10000).toFixed(2) + "W";
                    } else {
                        sums[index] = 'N/A';
                    }
                } else {
                    sums[index] = '-';
                }
            });
            return sums;
        },
        convertNumber(val) {
            let result = 0;
            if (val) {
                if (typeof val === 'string') {
                    if (val.indexOf("W") !== -1 || val.indexOf("w") !== -1) {
                        result = Number(val.replace("W", "").replace("w", "")) * 10000
                    } else {
                        result = Number(val);
                    }
                } else if (typeof val === 'number') {
                    result = val;
                }
            }
            return result;
        },
        auditApply(row) {
            this.auditApplyForm.applyId = row.id;
            this.auditApplyForm.taskId = this.taskId;
            this.auditApplyDialogVisible = true;
        },
        auditApplyConfirm() {
            taskApplyAudit(this.auditApplyForm).then(data => {
                if (data.respCode == 1000) {
                    this.auditApplyDialogVisible = false;
                    this.getData();
                }
            })
        },
        changeKol(row) {
            this.changeKolForm.applyId = row.id;
            this.changeKolForm.taskId = this.taskId;
            this.changeKolDialogVisible = true;
        },
        changeKolConfirm() {
            taskApplyChangeKol(this.changeKolForm).then(data => {
                if (data.respCode == 1000) {
                    this.changeKolDialogVisible = false;
                    this.getData();
                }
            })
        },
        setTime(row) {
            this.setTimeForm.applyId = row.id;
            this.setTimeForm.taskId = this.taskId;
            this.setTimeDialogVisible = true;
        },
        setTimeConfirm() {
            taskApplySetTime(this.setTimeForm).then(data => {
                if (data.respCode == 1000) {
                    this.setTimeDialogVisible = false;
                    this.getData();
                }
            })
        },
        submitJob(row) {
            this.submitJobForm.applyId = row.id;
            this.submitJobDialogVisible = true;
        },
        submitJobConfirm() {
            TaskApplySubmitJob(this.submitJobForm).then(data => {
                if (data.respCode == 1000) {
                    this.submitJobDialogVisible = false;
                    this.getData();
                }
            })
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatAcceptStatus: function (row, column, cellValue) {
            if (cellValue == 'APPLY_AUDITING') {
                return "报名审核中";
            } else if (cellValue == 'APPLY_REFUSED') {
                return "审核被拒";
            } else if (cellValue == 'APPLY_PASS') {
                return "审核通过(待提交作业)";
            } else if (cellValue == 'JOB_AUDITING') {
                return "作业审核中";
            } else if (cellValue == 'JOB_REFUSED') {
                return "作业被拒";
            } else if (cellValue == 'JOB_PASS') {
                return "作业通过";
            } else if (cellValue == 'FINISHED') {
                return "已完结";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#kolTaskTable', this.taskName + '报名数据.xlsx');
        },
        add: function () {
            addKolTask(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateKolTask(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteKolTask({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.taskId) {
                this.condition.search.taskId = this.taskId;
            }
            getKolTaskByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                this.getRowSpan();
            });
        },
        // 获取合并的数组
        getRowSpan() {
            this.rowSpanArr = [];
            this.tableData.forEach((item, index) => {
                if (index === 0) {
                    this.rowSpanArr.push(1);
                    this.position = 0;
                } else {
                    if (this.tableData[index].groupLeader === this.tableData[index - 1].groupLeader) {
                        this.rowSpanArr[this.position] += 1;
                        this.rowSpanArr.push(0);
                    } else {
                        this.rowSpanArr.push(1);
                        this.position = index;
                    }
                }
            });
        },
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            // 只合并区域位置
            if (columnIndex === 1) {
                const _row = this.rowSpanArr[rowIndex];
                return {
                    rowspan: _row,  // 行
                    colspan: 1      // 列
                };
            }
        }
    },
    beforeUpdate() {
        this.$nextTick(() => {
            // 在数据加载完，重新渲染表格
            this.$refs['kolTaskTable'].doLayout();
        })
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
